/**
 * 服务端渲染使用模板
 */

const Vue = require('vue')
const express = require('express')
const fs = require('fs')

// 使用模板时，会将服务端返回的渲染内容输出到模板内的 <!--vue-ssr-outlet--> 注释位置
const renderer = require('vue-server-renderer').createRenderer({
  template: fs.readFileSync('./index.template.html', 'utf-8')
})

const server = express()

server.get('/', (req, res) => {
  const app = new Vue({
    template: `
      <div id="app">
        <h1>{{ message }}</h1>
      </div>
    `,
    data: {
      message: 'Vue 服务端渲染'
    }
  })

  // renderToString 方法第二次参数可以传入模板数据
  // 在模板内以 {{ title }} 格式来绑定正常数据
  // 在模板内以 {{{ subTitle }}} 格式来绑定标签，否则标签不会被渲染
  renderer.renderToString(app, {
    title: 'Vue 服务端渲染',
    subTitle: '<h2>向模板传入外部数据</h2>'
  }, (err, html) => {
    if (err) {
      return res.status(500).end('Internal Server Error')
    }

    res.setHeader('Content-Type', 'text/html; charset=utf-8')
    res.end(html)
  })
})

server.listen(3000, () => {
  console.log('server running at port 3000')
})
